<template>
  <div>
    <Category :category3Change="getAttrList"></Category>
    <el-card>
      <div v-show="!isSet">
        <el-button type="primary" class="el-icon-plus" @click="setAttr">添加属性</el-button>
        <el-table border :data="attrList" style="width: 100%; margin-top: 20px;">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称">
          </el-table-column>
          <el-table-column label="属性值列表" width="800">
            <template slot-scope="scope">
              <el-tag v-for="attrVal in scope.row.attrValueList" :key="attrVal.id" color="#fee13f">{{ attrVal.valueName
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="setAttr(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="delAttr(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="isSet">
        <el-form>
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" style="width: 400px" v-model="attrSetData.attrName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editAttrValue">添加属性值</el-button>
          </el-form-item>
          <el-form-item>
            <el-table border :data="attrSetData.attrValueList">
              <el-table-column type="index" label="序号" width="80">
              </el-table-column>
              <el-table-column label="属性值名称" width="800">
                <template slot-scope="scope">
                  <el-input size="mini" autofocus v-if="scope.row.isEdit" v-model="scope.row.valueName"
                    @blur="editFinish(scope.row)" ref="attrValName"></el-input>
                  <div v-else @click="editAttrValue(scope.row)" style="width: 100%;">
                    {{ scope.row.valueName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button class="el-icon-delete" type="danger" size="mini" @click="delAttrVal(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAttr">保存</el-button>
            <el-button @click="isSet = false">取消</el-button>
          </el-form-item>
        </el-form>

      </div>
    </el-card>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
import reqAttr from '@/api/attr'
export default {
  name: 'Attr',
  data: () => ({
    attrList: [],
    isSet: false,
    attrSetData: {
      id: '',
      attrName: '',
      attrValueList: []
    }
  }),
  methods: {
    // 获取属性列表
    async getAttrList(category1Id, category2Id, category3Id) {
      let res = await reqAttr.reqAttrList(category1Id, category2Id, category3Id)
      this.attrList = res
      this.$store.dispatch('category/setCategoryInfo', { category1Id, category2Id, category3Id })
    },
    // 点击添加或修改属性值列表
    setAttr(attr) {
      this.isSet = true
      this.attrSetData.attrName = ''
      this.attrSetData.id = ''
      this.attrSetData.attrValueList.splice(0)
      if (attr.attrName) {
        this.attrSetData.attrName = attr.attrName
        this.attrSetData.attrValueList = cloneDeep(attr.attrValueList)
        this.attrSetData.id = attr.id
      }
    },
    // 点击添加属性值或直接点击属性值修改时
    editAttrValue(attrValue) {
      if (this.attrSetData.attrValueList.some(item => item.isEdit)) {
        return
      }
      if (attrValue.id) {
        let index = this.attrSetData.attrValueList.indexOf(attrValue)
        this.$set(this.attrSetData.attrValueList, index, { ...attrValue, isEdit: true })
      } else {
        this.attrSetData.attrValueList.push({
          valueName: '',
          isEdit: true
        })
      }
      this.$nextTick(() => {
        this.$refs.attrValName.focus()
      })
    },
    // 编辑属性值的输入框失去焦点时
    editFinish(attrValue) {
      const hasRepeat = this.attrSetData.attrValueList.some(item => item.valueName === attrValue.valueName && item !== attrValue)
      if (!attrValue.valueName.trim() || hasRepeat) {
        this.$refs.attrValName.focus()
        return this.$message({
          showClose: true,
          message: hasRepeat ? '不要输入重复的内容！' : '请输入有效的内容！',
          type: 'warning'
        })
      }
      attrValue.isEdit = false
    },
    // 删除属性值
    delAttrVal(attrVal) {
      let index = this.attrSetData.attrValueList.indexOf(attrVal)
      this.attrSetData.attrValueList.splice(index, 1)
    },
    // 保存添加或修改的属性值
    async saveAttr() {
      const {category1Id, category2Id, category3Id} = this.$store.state.category.categoryInfo
      let attr = {
        ...this.attrSetData,
        categoryId: category3Id,
        categoryLevel: 3,

      }
      try {
        await reqAttr.reqSaveAttr(attr)
        this.$message({
          showClose: true,
          message: '编辑成功！',
          type: 'success'
        })
        this.isSet = false;
        this.getAttrList(category1Id, category2Id, category3Id)
      } catch (error) {
        console.log(error);
      }
    },
    // 删除属性
    async delAttr(id){
      const {category1Id, category2Id, category3Id} = this.$store.state.category.categoryInfo
      await reqAttr.reqDelAttr(id)
      this.getAttrList(category1Id, category2Id, category3Id)
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped></style>
